<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我</title>
    <style>
                body{
            margin: 0;
            padding: 0;
        }
            .ljyleft{
            width: 20%;
            height: 100%;
            position: fixed;
        }
            #fixed1{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 90px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed2{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 135px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed3{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 180px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed4{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 800px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed5{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            background-color: red;
            position: fixed; 
            top: 225px; 
            left: 10px;
            outline: none;
            text-align: center;
            transition: background-color 0.3s;
        }
        #fixed1:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed2:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed3:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed4:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed5:hover{
            background-color: rgb(201, 104, 104);
        }
        .icon{
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
        }
        .icon-xiaohongshu {
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
            margin-top: 0px;
        }
        /* 右边 */
        .ljyright{
            width: 80%;
            height: 941.33px;
            position: relative;
            left: 20%;
        }
        .ljyuse {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中对齐 */
            font-family: Arial, sans-serif;
        }
        .search-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 600px;
            max-width: 600px;
            margin: 10px ;
            margin-left: 100px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 40px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .search-box input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: none;
            background-color: transparent;
            outline: none;
        }
        .search-box input[type="submit"] {
            padding: 10px;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .search-box input[type="submit"]:hover {
            background-color: #e60023; /* 小红书的主题色，深色版本 */
        }
        .search-box:hover{
            border: #e60023 1px solid;
        }
                /* 下拉菜单 */
        .text{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            margin-left: auto; /* 自动外边距将元素推到最右边 */
            margin-right: 100px;
        }
        .dropbtn {
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* 下拉按钮悬停效果 */
        .dropbtn:hover, .dropbtn:focus {
            background-color: #2980b9;
        }
        /* 下拉内容容器样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }   
        /* 下拉内容样式 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            margin-left: 20px;
            margin-top: 170px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        /* 下拉内容中的链接样式 */
        .dropdown-content a {  
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        /* 下拉内容中的链接悬停效果 */
        .dropdown-content a:hover {background-color: #f1f1f1}
        /* 显示下拉菜单 */
        .show {
            display: block;
        }
/********* 我 ***********/
        .box{
            width: 995px;
            height: 990px;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 100px;
            margin-left: 0px;
            z-index: 1;
        }
        .top {
            width: 100%;
            height: 350px;
        }
        .bottom {
            width: 100%;
            height: 850px;
            border-top: 1px solid gray;
        }
        .user-info {
            width: 50%;
            height: 200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute; /* 修改为绝对定位 */
            top: 50px;
            left: 50%; /* 修改为50%，然后使用transform调整 */
            transform: translateX(-50%);
        }
        .message{
            margin-left: 20px;
        }
        /* 头像 */
        .head-portiait{
            width: 160px;
            height: 160px;
            overflow: hidden;
            font-size: 16px; 
            border: 1px solid black; 
            border-radius: 160px;
        }
        /* 头像图片 */
        .head-portiait img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin: 0 auto
        }
        /* 基本信息 */
        .basic-message{
            width: 350px;
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        /* 用户名 */
        .name{
            width: 100%;
            height: 40px;
            color: black;
            font-size: 24px;
            font-weight: 600;
            line-height: 120%;
            word-wrap: break-word;
            width: 100%;
        }
        .signature{
            width: 100%;
            height: 20px;
            color: gray;
            font-size: 12px;
            line-height: 120%;
            word-wrap: break-word;
        }
        .age-message{
            align-items: center;
            color: gray;
            display: flex;
            flex-wrap: wrap;
            font-size: 12px;
            margin-top: 12px;
            row-gap: 20px;
            text-align: center;
        }
        .follow-message{
            width: 100%;
            height: 20px;
            color: gray;
            font-size: 12px;
            margin-top: 12px;
            row-gap: 20px;
            word-wrap: break-word;
        }
/************ 选项卡 ************/
        .tab {
        width: 100%;
        }

        .t-title {
            display: flex;
            justify-content: space-around;
            height: 32px;
            margin-top: 10px; /* 添加上边距 */
        }

        .t-title span {
            display: inline-block;
            width: 100px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer; /* 添加指针样式 */
        }

        .tc {
            height: 566px;
            font-size: 18px;
            text-align: center;
            line-height: 30px;
            text-indent: 2em;
            display: none;
        }
        .show {
            display: block;
        }

        .cur {
            border-bottom: 2px solid rgb(250, 123, 182); /* 修改边框样式 */
                color: rgb(231, 126, 208);
        }
    </style>
</head>
<body>
    <div class="ljyleft">
        <div class="icon">
            <svg class="icon-xiaohongshu" aria-hidden="true">
                <use xlink:href="#icon-xiaohongshu"></use>
            </svg>
        </div>
        <div id="fixed1"><a href="https://www.baidu.com/">
            <span class="iconfont icon-faxian"> 发现</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed2"><a href="#">
            <span class="iconfont icon-fabu"> 发布</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed3"><a href="#">
            <span class="iconfont icon-tongzhi"> 通知</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed4"><a href="#">
            <span class="iconfont icon-gengduo"> 更多</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed5"><a href="#">
            <span>登录</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
    </div>
    <div class="ljyright">
        <div class="ljyuse">
        <div class="search-box">
            <input type="text" name="query" placeholder="搜索笔记、商品和用户">
            <input type="submit" value="搜索">
        </div>
        <div class="text">
            <span onclick="toggleDropdown()">创作中心</span>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#">创作服务</a>
                    <a href="#">电脑直播</a>
                    <a href="#">电脑直播助手</a>
                </div>
        </div>
        </div>
        <div class="box">
            <div class="top">
                <div class="user-info">
                    <div class="picture">
                        <div class="head-portiait">
                            <img src=".\奇奇怪怪、可可爱爱、很特别的头像分享_2_畅畅的美图文案馆_来自小红书网页版.jpg" alt="">
                        </div>
                    </div>
                    <div class="message">
                        <div class="basic-message">
                            <div class="name">
                                <span>六一</span>
                            </div>
                            <div class="signature">
                                <span>小红书号：932148357</span>
                                <span>IP属地：西安</span>
                            </div>
                        </div>
                        <div class="age-message">
                            <span>18岁</span>
                        </div>
                        <div class="follow-message">
                            <span>100 关注</span>
                            <span>100 粉丝</span>
                            <span>100 赞</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- tab选项卡 -->
            <div class="bottom">
                <div class="tab">
                    <div class="t-title">
                        <span class="cur">笔记</span>
                        <span>收藏</span>
                        <span>点赞</span>
                    </div>
                    <div class="tc show">
                        <div class="content">
                                <svg class="icon-tubiao" aria-hidden="true">
                                    <use xlink:href="#icon-shimodumeiyou"></use>
                                </svg>
                                <div class="world">
                                    <samp>还没有上传任何内容</samp>
                                </div>
                        </div>
                    </div>
                    <div class="tc">
                        <div class="content">
                            <svg class="icon-tubiao" aria-hidden="true">
                                <use xlink:href="#icon-shimodumeiyou"></use>
                            </svg>
                            <div class="world">
                                <samp>还没有上传任何内容</samp>
                            </div>
                        </div>
                    </div>
                    <div class="tc">
                        <div class="content">
                            <svg class="icon-tubiao" aria-hidden="true">
                                <use xlink:href="#icon-shimodumeiyou"></use>
                            </svg>
                            <div class="world">
                                <samp>还没有上传任何内容</samp>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>// 点击下拉菜单按钮时显示或隐藏下拉菜单
        function toggleDropdown() {
        var dropdown = document.getElementById("myDropdown");
        if (dropdown.style.display === "block") {
             dropdown.style.display = "none";
        } 
        else {
            dropdown.style.display = "block";
        }
    }
        // 点击下拉菜单外部时关闭菜单
        window.onclick = function(event) {
        if (!event.target.matches('.text span')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.style.display === "block") {
                    openDropdown.style.display = "none";
                }
            }
        }
        }
    </script>
    <script>//tab选项卡
        var tab=document.querySelector('.tab');
        var tt=tab.querySelector('.t-title');
        var spans=tt.querySelectorAll('span');// all是一种对象
        var tcs=tab.querySelectorAll('.tc');//5个对象
        for(var i=0;i<spans.length;i++){
            spans[i].index=i;
            spans[i].onmouseover=function()/*鼠标移入*/
            {
                for(var j=0;j<tcs.length;j++){
                    tcs[j].style.display='none';
                    spans[j].className='';
                }
                this.className+='cur';
                tcs[this.index].style.display='block';
            }
        }
    </script>
    <script src="./iconfont.js"></script>
</body>
</html>
